<template>
	<view class="container files-log-container">
		<view class="page-main">
			<view class="page-top">
				<!-- <view class="page-type">
					<view class="type-list" :class="pageType==='xy'&&'type-list-active'" @click="clickPageType('xy')">血压
					</view>
					<view class="type-list" :class="pageType==='xt'&&'type-list-active'" @click="clickPageType('xt')">血糖
					</view>
					<view class="type-list" :class="pageType==='tz'&&'type-list-active'" @click="clickPageType('tz')">体重
					</view>
					<view class="type-list" :class="pageType==='ns'&&'type-list-active'" @click="clickPageType('ns')">尿酸
					</view>
				</view> -->
				<view class="type-main xy-main" :class="pageType==='xy'&&'show-panel'">
					<view class="page-title">
						<text>血压检测测试数据</text>
						<text class="page-time">10-30 21:06</text>
					</view>
					<template v-if="pageList.length>0">
						<view class="xy-chart-box">
							<view class="xy-chart">
								<qiun-data-charts type="gauge" :opts="optsXY" :chartData="chartDataXY" />
							</view>
							<view>
								<view class="xy-info" style="margin-bottom: 20rpx;">
									<view class="xy-info-title xy-info-title-one">最低值</view>
									<view class="xy-info-words">{{minData}}</view>
								</view>
								<view class="xy-info">
									<view class="xy-info-title xy-info-title-two">最高值</view>
									<view class="xy-info-words">{{maxData}}</view>
								</view>
							</view>
						</view>
						<view class="tips-box danger-box" v-if="nowData>120">
							<view class="iconfont">&#xe621;</view>
							<view>
								您的血压数据连续多次检测，血压压力依然异常平台建议您及时医院就医。
							</view>
						</view>
						<view class="tips-box success-box" v-else>
							<view class="iconfont">&#xe621;</view>
							<view>
								您的血压数据正常。
							</view>
						</view>
					</template>
				</view>
				<view class="type-main xt-main" :class="pageType==='xt'&&'show-panel'">
					<view class="page-title">
						<text>最近血糖</text>
						<text class="page-time">10-30 21:06</text>
					</view>
					<template v-if="pageList.length>0">
						<view class="xt-chart-box">
							<view class="xt-chart">
								<qiun-data-charts type="line" :opts="optsXT" :chartData="chartDataXT" />
							</view>

						</view>
						<view class="tips-box danger-box" v-if="nowData>8">
							<view class="iconfont">&#xe621;</view>
							<view>
								您的血糖数据连续多次检测，血糖依然异常平台建议您及时医院就医。
							</view>
						</view>
						<view class="tips-box success-box" v-else>
							<view class="iconfont">&#xe621;</view>
							<view>
								您的血糖数据正常。
							</view>
						</view>
					</template>

				</view>
				<view class="type-main tz-main" :class="pageType==='tz'&&'show-panel'">
					<view class="page-title">
						<text>体重检测测试数据</text>
						<text class="page-time">10-30 21:06</text>
					</view>
					<template v-if="pageList.length>0">
						<view class="tz-chart-box">
							<view class="tz-chart">
								<image class="tz-bg" :src="'/static/tz.png'" mode="widthFix"></image>
								<qiun-data-charts type="gauge" :opts="optsTZ" :chartData="chartDataTZ" />
							</view>

						</view>
					</template>
				</view>
				<view class="type-main ns-main" :class="pageType==='ns'&&'show-panel'">
					<view class="page-title">
						<text>最近尿酸</text>
						<text class="page-time">10-30 21:06</text>
					</view>
					<template v-if="pageList.length>0">
						<view class="xt-chart-box">
							<view class="xt-chart">
								<qiun-data-charts type="line" :opts="optsNS" :chartData="chartDataNS" />
							</view>

						</view>
						<view class="tips-box danger-box" v-if="nowData>400">
							<view class="iconfont">&#xe621;</view>
							<view>
								您的尿酸数据连续多次检测，尿酸依然异常平台建议您及时医院就医。
							</view>
						</view>
						<view class="tips-box success-box" v-else>
							<view class="iconfont">&#xe621;</view>
							<view>
								您的尿酸数据正常。
							</view>
						</view>
					</template>
				</view>

				<view class="null-page" v-if="pageList.length===0">
					<text class="iconfont">&#xe642;</text>
					<view class="null-page-tips">暂无数据~</view>
				</view>
			</view>
			<view class="page-title" style="padding: 20rpx 0;">
				<text>历史记录</text>
			</view>
			<view class="page-log">
				<view class="table-head table-row">
					<view class="col1">测量时间</view>
					<view class="col2">数值</view>
					<view class="col3">评估</view>
				</view>
				<view class="table-row" v-for="item in pageList" :key="item.id">
					<view class="col1">{{item.measureTime}}</view>
					<view class="col2">{{item.value}}</view>
					<view class="col3 c-success" :class="getStatusClass(item.value)">{{getStatus(item.value)}}</view>
				</view>
			</view>
			<view class="null-page" v-if="pageList.length===0">
				<view class="null-page-tips">暂无数据~</view>
			</view>
		</view>
		<view class="page-bottom">
			<view class="yuan-btn btn-primary" @click="clickAdd">上传健康信息</view>
		</view>
		<view class="other-panel" :class="showAddPanel&&'other-panel-show'">
			<view class="other-main" :class="showAddPanel&&'other-main-show'">
				<view class="form-panel">
					<view class="form-title">基础信息</view>
					<view class="form-list">
						<text class="list-title">血压:</text>
						<input class="list-input" type="digit" v-model="formData.xy"
							placeholder-class="placeholder-style" placeholder="请输入你的血压" />
						<text class="list-unit">mmHg</text>
					</view>
					<view class="form-list">
						<text class="list-title">血糖:</text>
						<input class="list-input" type="digit" v-model="formData.xt"
							placeholder-class="placeholder-style" placeholder="请输入你的血糖" />
						<text class="list-unit">mmol</text>
					</view>
					<view class="form-list">
						<text class="list-title">体重:</text>
						<input class="list-input" type="digit" v-model="formData.tz"
							placeholder-class="placeholder-style" placeholder="请输入你的体重" />
						<text class="list-unit">kg</text>
					</view>
					<view class="form-list">
						<text class="list-title">尿酸:</text>
						<input class="list-input" type="digit" v-model="formData.ns"
							placeholder-class="placeholder-style" placeholder="请输入你的尿酸" />
						<text class="list-unit">μmol</text>
					</view>
				</view>
				<view class="other-bottom">
					<view class="yuan-btn btn-default sure-btn" style="margin-right: 50rpx;" @click="clickCancel">取消
					</view>
					<view class="yuan-btn btn-primary sure-btn" @click="clickSure">保存</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref } from 'vue';
	import { onUnload,onLoad } from "@dcloudio/uni-app"
	import { format, hideLoading, showLoading, showToast, toDecimalNoZero } from '../../common/util';
	import userApi from '../../common/userApi';
	const pageType = ref('xy')
	const showAddPanel = ref(false)
	const chartDataXY = ref({})
	const optsXY = reactive({
		padding: undefined,
		title: { name: "0", fontSize: 25, color: "#2fc25b", offsetY: 25 },
		subtitle: { name: "mmHg", fontSize: 12, color: "#666666", offsetY: 25 },
		extra: {
			gauge: {
				type: "default",
				width: 20,
				labelColor: "#999",
				startAngle: 0.75,
				endAngle: 0.25,
				startNumber: 0,
				endNumber: 220,
				labelFormat: "",
				splitLine: {
					fixRadius: 0,
					splitNumber: 10,
					width: 20,
					color: "#FFFFFF",
					childNumber: 5,
					childWidth: 20
				},
				pointer: { width: 8, color: "#F2F406" }
			}
		}
	})
	const chartDataXT = ref({})
	const optsXT = {
		color: ["#14D6B4"],
		padding: [15, 10, 20, 15],
		enableScroll: false,
		legend: {
			show: false
		},
		xAxis: {
			disableGrid: true
		},
		yAxis: {
			gridType: "dash",
			dashLength: 2,
			data: [{ min: 0, max: 20 }]
		},
		extra: {
			line: {
				type: "curve",
				width: 2,
				activeType: "hollow",
				linearType: "custom",
				onShadow: true,
				animation: "horizontal"
			}
		}
	}
	const chartDataTZ = ref({})
	const optsTZ = reactive({
		padding: undefined,
		title: { name: "60", fontSize: 25, color: "#2fc25b", offsetY: 25 },
		subtitle: { name: "kg", fontSize: 12, color: "#666666", offsetY: 25 },
		extra: {
			gauge: {
				type: "default",
				width: 20,
				labelColor: "#999",
				startAngle: 0.75,
				endAngle: 0.25,
				startNumber: 0,
				endNumber: 120,
				labelFormat: "",
				splitLine: {
					fixRadius: 0,
					splitNumber: 3,
					width: 20,
					color: "#FFFFFF",
					childNumber: 0,
					childWidth: 20
				},
				pointer: { width: 8, color: "#F2F406" }
			}
		}
	})

	const chartDataNS = ref({})
	const optsNS = {
		color: ["#14D6B4"],
		padding: [15, 5, 20, 5],
		enableScroll: false,
		legend: {
			show: false
		},
		xAxis: {
			disableGrid: true
		},
		yAxis: {
			gridType: "dash",
			dashLength: 2,
			data: [{ min: 0, max: 1000 }]
		},
		extra: {
			line: {
				type: "curve",
				width: 2,
				activeType: "hollow",
				linearType: "custom",
				onShadow: true,
				animation: "horizontal"
			}
		}
	}


	const clickPageType = (type : string) => {
		pageType.value = type
		getPageData()
	}
	const clickAdd = () => {
		formData.xt=''
		formData.xy=''
		formData.tz=''
		formData.ns=''
		showAddPanel.value = true
	}
	onLoad((options) => {
		pageType.value = options.type || 'xy';
	})
	
	onMounted(async () => {
		await getPageData()
		// timer = setInterval(() => {
		// 	chartDataTZ.value = {
		// 		categories: [
		// 			{ "value": 0.33, "color": "#fff" },
		// 			{ "value": 0.67, "color": "#fff" },
		// 			{ "value": 1, "color": "#fff" },
		// 		],
		// 		series: [{ name: "体重", data: 0 }]
		// 	}
		// 	setTimeout(() => {
		// 		chartDataTZ.value = {
		// 			categories: [
		// 				{ "value": 0.33, "color": "#fff" },
		// 				{ "value": 0.67, "color": "#fff" },
		// 				{ "value": 1, "color": "#fff" },
		// 			],
		// 			series: [{ name: "体重", data: 0.4 }]
		// 		}
		// 	}, 50)

		// }, 10000)

	})
	let timer : any = 0
	onUnload(() => {
		// 非 tabBar 页面离开时清除
		if (timer) {
			clearInterval(timer)
			timer = null
		}
	})
	const pageList = ref<any>({})
	const maxData = ref(0)
	const minData = ref(0)
	const nowData = ref(0)
	const getPageData = async () => {
		showLoading()
		try {
			const res = await userApi.jsUserHealthInfoList({ type: pageType.value })
			const data : any[] = res.data
			let max = null
			let min = null
			data.forEach((item) => {
				if (item.value > max || max === null) max = item.value
				if (item.value < min || min === null) min = item.value
			})
			maxData.value = max
			minData.value = min
			nowData.value = data[0]?.value || 0
			pageList.value = data
			if (pageType.value === 'xy') {
				const colorArr = [
					{ "value": 0.1, "color": "#2fc25b" },
					{ "value": 0.2, "color": "#2fc25b" },
					{ "value": 0.3, "color": "#2fc25b" },
					{ "value": 0.4, "color": "#2fc25b" },
					{ "value": 0.42, "color": "#4aba5b" },
					{ "value": 0.44, "color": "#65b25b" },
					{ "value": 0.46, "color": "#81aa5b" },
					{ "value": 0.48, "color": "#9da25b" },
					{ "value": 0.50, "color": "#b99a5b" },
					{ "value": 0.52, "color": "#d5925b" },
					{ "value": 0.54, "color": "#f18a5b" },
					{ "value": 0.56, "color": "#f56b5b" },
				]
				const per = Number(toDecimalNoZero(nowData.value / 220, 2))
				const categories = []
				colorArr.forEach((item) => {
					if (per > item.value) {
						categories.push(item)
					}
				})
				if (per > 0.56) categories.push({ "value": per, "color": "#f56b5b" })
				categories.push({ "value": 1, "color": "#eee" })
				chartDataXY.value = {
					categories: categories,
					series: [{ name: "血压", data: per }]
				}
				optsXY.title.name = nowData.value + ''
			} else if (pageType.value === 'xt') {
				const categories = []
				const dataArr = []
				const timeData = [...data].reverse()
				timeData.forEach((item) => {
					categories.push(format(item.measureTime, 'hh:mm'))
					dataArr.push(item.value)
				})
				chartDataXT.value = {
					categories: categories,
					series: [
						{
							name: "血糖",
							setShadow: [3, 8, 10, "#14D6B4"],
							data: dataArr
						},
					]
				}
			}
			else if (pageType.value === 'tz') {
				const per = Number(toDecimalNoZero(nowData.value / 120, 2))
				chartDataTZ.value = {
					categories: [
						{ "value": 0.33, "color": "#fff" },
						{ "value": 0.67, "color": "#fff" },
						{ "value": 1, "color": "#fff" },
					],
					series: [{ name: "体重", data: per }]
				}
				optsTZ.title.name = nowData.value + ''
			} else if (pageType.value === 'ns') {
				const categories = []
				const dataArr = []
				const timeData = [...data].reverse()
				timeData.forEach((item) => {
					categories.push(format(item.measureTime, 'hh:mm'))
					dataArr.push(item.value)
				})
				chartDataNS.value = {
					categories: categories,
					series: [
						{
							name: "尿酸",
							setShadow: [3, 8, 10, "#14D6B4"],
							data: dataArr
						},
					]
				}
			}

		} finally {
			hideLoading()
		}
	}
	const formData = reactive({
		xt: '',
		xy: '',
		tz: '',
		ns: ''
	})

	const clickSure = async () => {
		showLoading()
		try {
			//如果数据都为空，提示用户
			if (formData.xt === '' && formData.xy === '' && formData.tz === '' && formData.ns === '') {
				showToast('请填写您的健康数据')
				return
			}
			const data = []
			for (let i in formData) {
				data.push({ value: formData[i], type: i })
			}
			const res = await userApi.jsUserHealthInfoAdd(data)
			showToast('保存成功')
			showAddPanel.value = false
			getPageData()
		} finally {
			hideLoading()
		}

	}
	const clickCancel = () => {
		showAddPanel.value = false

	}

	const getStatusClass = (val) => {
		if (pageType.value === 'xy') {
			if (val > 120) return 'c-danger'
		} else if (pageType.value === 'xt') {
			if (val > 8) return 'c-danger'
		} else if (pageType.value === 'ns') {
			if (val > 400) return 'c-danger'
		} else if (pageType.value === 'tz') {
			if (val > 80) return 'c-danger'
		}
		return 'c-success'
	}
	const getStatus = (val) => {
		if (pageType.value === 'xy') {
			if (val > 120) return '异常'
		} else if (pageType.value === 'xt') {
			if (val > 8) return '异常'
		} else if (pageType.value === 'ns') {
			if (val > 400) return '异常'
		} else if (pageType.value === 'tz') {
			if (val > 80) return '异常'
		}
		return '正常'
	}
</script>

<style lang="scss">
	.files-log-container {
		background: linear-gradient(180deg, #DAFBFB 0%, #D7E5FF 8%, #F2F3F8 40%, #F2F3F8 100%);
		padding: 30rpx;
		padding-bottom: 220rpx;

		.page-main {
			margin-top: 10rpx;
		}

		.page-top {
			background-color: #fff;
			border-radius: 8rpx;
		}

		.page-type {
			background-color: rgba(245, 246, 250, 1);
		}

		.type-list {
			display: inline-block;
			width: 25%;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			font-weight: bold;
			font-size: 30rpx;
			color: #080808;
			border-radius: 8rpx;
		}

		.type-list-active {
			background-color: #fff;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				width: 50rpx;
				height: 8rpx;
				background-color: rgba(64, 212, 159, 1);
				border-radius: 8rpx;
				left: 36%;
			}
		}

		.type-main {
			padding: 20rpx;
			position: absolute;
			width: 100%;
			opacity: 0;
			left: -900rpx;
		}

		.show-panel {
			position: relative;
			left: 0;
			opacity: 1;
		}

		.page-title {
			font-size: 30rpx;
			font-weight: bold;
		}

		.page-time {
			font-weight: lighter;
			font-size: 24rpx;
			color: rgba(51, 51, 51, 0.7);
			margin-left: 10rpx;
		}

		.tz-chart-box {
			padding: 40rpx 0 20rpx 0;
		}

		.tz-chart {
			width: 100%;
			height: 380rpx;
			position: relative;
		}

		.tz-bg {
			position: absolute;
			width: 380rpx;
			top: 0;
			margin: auto;
			left: 0;
			right: 0;
			z-index: 1;
		}

		.xy-chart-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx 0 20rpx 0;
		}

		.xy-chart {
			width: 380rpx;
			height: 380rpx;
		}

		.xy-info {
			width: 150rpx;
			padding: 20rpx 0;
			border-bottom: solid 4rpx #eee;
		}

		.xy-info-title {
			font-size: 24rpx;
			color: #545B60;
			position: relative;
			padding: 0 10rpx;

			&::before {
				content: '';
				width: 12rpx;
				height: 12rpx;
				border-radius: 12rpx;
				position: absolute;
				left: -15rpx;
				top: 12rpx;
			}
		}

		.xy-info-title-one {
			&::before {
				background-color: rgba(10, 221, 158, 1);
			}
		}

		.xy-info-title-two {
			&::before {
				background-color: rgba(239, 72, 76, 1);
			}
		}

		.xy-info-words {
			font-weight: bold;
			font-size: 46rpx;
			color: #333333;
			margin-top: 15rpx;
		}

		.tips-box {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			padding: 20rpx;
			border-radius: 8rpx;
			line-height: 40rpx;

			.iconfont {
				padding: 10rpx;
				font-size: 38rpx;
			}
		}

		.danger-box {
			background: rgba(255, 58, 59, 0.2);
			color: rgba(255, 58, 59, 1);
		}

		.success-box {
			background: rgba(20, 214, 180, 0.2);
			color: rgba(20, 214, 180, 1);
		}

		.page-log {
			background-color: #fff;
			border-radius: 8rpx;
			padding: 0 20rpx;
		}

		.table-row {
			height: 85rpx;
			display: flex;
			align-items: center;
			text-align: center;
			border-bottom: solid 1px #E8E8E8;
			font-size: 24rpx;
			color: #333333;
		}

		.table-head {
			font-size: 26rpx;
			color: #545B60;
		}

		.col1 {
			width: 40%;
		}

		.col2,
		.col3 {
			width: 30%;
		}


		.page-bottom {
			position: fixed;
			width: 100%;
			height: 170rpx;
			padding: 20rpx;
			padding-bottom: 50rpx;
			background-color: #fff;
			box-shadow: 0rpx -1rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);
			bottom: 0;
			left: 0;
			z-index: 10;

			.yuan-btn {
				height: 80rpx;
				border-radius: 80rpx;
				width: 100%;
			}
		}

		.form-panel {
			padding: 0 20rpx;
		}

		.form-title {
			font-size: 32rpx;
			color: #333;
			padding-top: 20rpx;
			font-weight: bold;
		}

		.form-list {
			display: flex;
			align-items: center;
			border-bottom: solid 1px #E8E8E8;
			height: 100rpx;
			font-size: 28rpx;
		}

		.list-title {
			color: #6D6D6D;
			margin-right: 20rpx;
		}

		.list-input {
			flex-grow: 1;
			height: 100%;
		}


		.other-panel {
			position: fixed;
			z-index: 99;
			background-color: rgba(0, 0, 0, 0.3);
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			transform: translateY(100%);
		}

		.other-panel-show {
			transform: translateY(0);
		}

		.other-main {
			background-color: #fff;
			border-radius: 15rpx 15rpx 0 0;
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 0 20rpx 50rpx 20rpx;
			transform: translateY(100%);
			transition: all 0.3s;
		}

		.other-main-show {
			transform: translateY(0);
		}

		.other-bottom {
			margin-top: 100rpx;
			text-align: center;

			.sure-btn {
				display: inline-flex;
				width: 200rpx;
				height: 70rpx;
				border-radius: 70rpx;
			}
		}
	}
</style>